<template>
  <view>
    <biaotou title="案件信息"></biaotou>
    <inputForm v-model="form" ref="form" :list="list" @locatChange="locatClick">
      <template v-slot:carProvince>
        <view class="tn-flex">
          <view style="width: 30%;padding-right: 10%;">
            <tn-input v-model="form.carProvince" type="select" :selectOpen="chepaiSelectShow"
                      @click="chepaiSelectShow = true"/>
          </view>
          <view style="width: 70%">
            <tn-input v-model="form.carNo" @input="(e) => handleInput(e, 'carNo')"/>
          </view>
        </view>

      </template>

    </inputForm>

    <!--  车牌  -->
    <tn-select v-model="chepaiSelectShow" mode="single" :list="carprovinceJsonList" value-name="name" label-name="name"
               @confirm="chepaiClick"></tn-select>

  </view>
</template>

<script>
import Biaotou from "./biaotou.vue";
import dayjs from "dayjs";
import {electAllGroup, getRoadAndHeadByDepartId, selectDicByCode} from "../../../api/lupeiwenshu";
import InputForm from "../../../components/inputForm.vue";

export default {
  components: {InputForm, Biaotou},
  data() {
    return {

      carprovinceJsonList: [],
      chepaiSelectShow: false,

      form: {
        happentime1: dayjs().format('YYYY-MM-DD hh:mm:ss'),
        inquiryStart1: '',
        inquiryEnd1: '',
        inquestStart1: '',
        inquestEnd1: '',
        locat: 2923522278163456,
        enquireIds: "荣乌高速天津方向",
        kNum: 'K',
        mNum: '',
        jituan: '河北高速集团',
        factTwo: '接调度室电话赶到事故现场，发现',
        carProvince: '',
        carNo: '',
        carColor: '',
        carType: '',
      },
      list: [
        {
          label: "案件发生时间：",
          prop: "happentime1",
          type: "datetime",
          clearable:false,
          labelWidth: 250
        },
        {
          label: "谈话开始时间：",
          prop: "inquiryStart1",
          type: "datetime",
          clearable:false,
          labelWidth: 250
        },
        {
          label: "谈话结束时间：",
          prop: "inquiryEnd1",
          type: "datetime",
          clearable:false,
          labelWidth: 250
        },
        {
          label: "勘验开始时间：",
          prop: "inquestStart1",
          type: "datetime",
          clearable:false,
          labelWidth: 250
        },
        {
          label: "勘验结束时间：",
          prop: "inquestEnd1",
          type: "datetime",
          clearable:false,
          labelWidth: 250
        },
        {
          label: "案件发生地点：",
          prop: "locat",
          type: "select",
          labelWidth: 250,
          props: {
            label: 'roadName',
            value: 'id'
          },
          dicData: []
        },
        {
          label: '桩号：',
          prop: 'kNum',
          prop2: 'mNum',
          type: "mileage"
        },
        {
          label: "路段所属：",
          prop: "jituan",
          type: "select",
          props: {
            label: 'groupName',
            value: 'groupName'
          },
          dicData: []
        },
        {
          label: "信息来源：",
          prop: "factTwo",
          type: "select",
          props: {
            label: 'name',
            value: 'name'
          },
          dicData: []
        },
        {
          label: "车牌：",
          prop: "carProvince",
          type: "slot",
        },
        {
          label: "颜色：",
          prop: "carColor",
          type: "select",
          props: {
            label: 'name',
            value: 'name'
          },
          dicData: []
        },
        {
          label: "车型：",
          prop: "carType",
          type: "select",
          props: {
            label: 'name',
            value: 'name'
          },
          dicData: []
        }
      ]
    };
  },
  methods: {
    // 初始化下拉框字典
    async initSelectJson() {
      this.list.find(item => item.label === '案件发生地点：').dicData = (await getRoadAndHeadByDepartId()).data;
      this.list.find(item => item.label === '路段所属：').dicData = (await electAllGroup()).data;
      this.list.find(item => item.label === '信息来源：').dicData = (await selectDicByCode('ssqk')).data;
      this.list.find(item => item.label === '颜色：').dicData = (await selectDicByCode('clys')).data;
      this.list.find(item => item.label === '车型：').dicData = (await selectDicByCode('cllx')).data;

      this.carprovinceJsonList = (await selectDicByCode('clsf')).data;
    },
    // 选择车牌属地
    chepaiClick(val) {
      this.form.carProvince = val[0].value;
    },
    // 车牌字母转大写
    handleInput(e, name) {
      this.form[name] = e.toUpperCase()
    },
    // 案件发生地点
    locatClick(val) {
      this.form.locat = val[0].value;
      this.form.enquireIds = val[0].label;
    },
  },
  mounted() {
    this.initSelectJson()
  },
};
</script>
